<template>
    <div class="main">
        <div class="left">
            <el-menu
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                :default-active="defaultActive"
            >
                <el-sub-menu
                    v-for="item in menuList"
                    :key="item.href"
                    :index="item.href"
                >
                    <template #title>
                        <el-icon><location /></el-icon>
                        <span>{{ item.menuName }}</span>
                    </template>
                    <el-menu-item
                        v-for="item2 in item.child"
                        :index="item2.href"
                        :key="item2.href"
                    >
                        {{ item2.menuName }}
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
        <div class="right">
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup>
import {
  Location,
} from '@element-plus/icons-vue'
import { defineProps, ref } from "vue";

import { useRoute } from "vue-router";
const route = useRoute();

const defaultActive = ref(route.name)
const handleOpen = (key, keyPath) => {
    console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
    console.log(key, keyPath);
};

const props = defineProps({
    menuList: Array,
});
</script>

<style scoped>
.main {
    width: 100%;
    height: calc(100vh - 58px);
    display: flex;
}

.left {
    width: 280px;
    height: 100%;
    background: #e1e6ea;
    overflow-y: auto;
}

.left::-webkit-scrollbar {
    width: 4px;
}
.left::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #80808013;
}
.left::-moz-scrollbar {
    width: 4px;
}
.left::-moz-scrollbar-thumb {
    border-radius: 5px;
    background-color: #80808013;
}

.right {
    width: calc(100% - 280px);
    height: 100%;
    background: white;
}

.el-menu {
    border-right: 0;
}

.el-sub-menu__title {
    background: rgb(236, 240, 243);
}

.el-menu-item {
    /* margin-left: 20px; */
    background: #e1e6ea;
    text-align: center;
    padding-left: 60px !important;
}
</style>
